<template>
    <div class="block">
        <ul>
            <li class="item-list" v-for="(item, index) in data" :key="index" @click="selectItem(item)">{{item.bankName}}</li>
        </ul>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator'
    @Component
    export default class Select extends Vue {
        @Prop() data!:any

        selectItem (item:any) {
            this.$emit('select-item',item)
        }
    }
</script>

<style lang="scss" scoped>
    
    ul, li{
        padding: 0;
        list-style: none;
        margin: 0;
    }
    .block{
        position: absolute;
        top: 32px;
        z-index: 1000;
        background-color: #fff;
        width: 100%;
        max-height: 272px;
        overflow: auto;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 3px;
        .item-list{
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            padding: 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: $__color-label;
            cursor: pointer;
            &:hover{
                background-color: $__color-bg-primary;
            }
        }
    }
</style>